iT邦幫忙

2024 iThome 鐵人賽

DAY 21
0
JavaScript

Javascript網頁程式管理系統系列 第 21

day 21 javascript運動app網頁程式管理系統

  • 分享至 

  • xImage
  •  

今天是第二十一天我們可以寫一個javascript運動app網頁程式管理系統,由於現在科技日新月異,大家比較少運動,因此我們可以自己寫一個javascript運動app去紀錄自己的運動規律以及路線,因此我可以寫一個app去了解我自己的身體狀態透過javasctipt運動app網頁程式管理系統來達成此目標,以下是我的程式碼

1. HTML (建立網頁結構)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>運動管理系統</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>運動管理系統</h1>
        
        <div class="form-group">
            <label for="exercise-name">運動名稱:</label>
            <input type="text" id="exercise-name" placeholder="輸入運動名稱">
        </div>
        
        <div class="form-group">
            <label for="exercise-duration">運動時間 (分鐘):</label>
            <input type="number" id="exercise-duration" placeholder="輸入運動時間">
        </div>
        
        <button id="add-exercise-btn">新增運動</button>
        
        <h2>運動記錄</h2>
        <ul id="exercise-list"></ul>
    </div>

    <script src="script.js"></script>
</body>
</html>

2. CSS (設置樣式)

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    padding: 20px;
}

.container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 0 auto;
}

h1 {
    text-align: center;
    color: #333;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #333;
}

input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

h2 {
    margin-top: 30px;
    color: #333;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    background-color: #f8f9fa;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

li span {
    font-size: 16px;
    color: #333;
}

li button {
    background-color: #dc3545;
    border: none;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

li button:hover {
    background-color: #c82333;
}

3. JavaScript (處理邏輯)

// 獲取表單元素
const exerciseNameInput = document.getElementById('exercise-name');
const exerciseDurationInput = document.getElementById('exercise-duration');
const addExerciseButton = document.getElementById('add-exercise-btn');
const exerciseList = document.getElementById('exercise-list');

// 儲存運動記錄
let exercises = [];

// 新增運動
addExerciseButton.addEventListener('click', () => {
    const name = exerciseNameInput.value.trim();
    const duration = exerciseDurationInput.value.trim();

    if (name && duration && !isNaN(duration)) {
        const exercise = {
            name,
            duration: parseInt(duration, 10)
        };
        exercises.push(exercise);
        renderExerciseList();
        clearInputs();
    } else {
        alert('請正確輸入運動名稱和時間');
    }
});

// 渲染運動列表
function renderExerciseList() {
    exerciseList.innerHTML = '';
    exercises.forEach((exercise, index) => {
        const listItem = document.createElement('li');
        listItem.innerHTML = `
            <span>${exercise.name} - ${exercise.duration} 分鐘</span>
            <button onclick="deleteExercise(${index})">刪除</button>
        `;
        exerciseList.appendChild(listItem);
    });
}

// 刪除運動
function deleteExercise(index) {
    exercises.splice(index, 1);
    renderExerciseList();
}

// 清除輸入欄位
function clearInputs() {
    exerciseNameInput.value = '';
    exerciseDurationInput.value = '';
}

4. 功能介紹

  • 新增運動記錄:使用者輸入運動名稱及運動時間,點擊「新增運動」按鈕將資料新增到運動記錄中。
  • 查看運動記錄:所有新增的運動將顯示在下方列表,包含名稱及運動時間。
  • 刪除運動記錄:每個運動記錄旁都有一個刪除按鈕,點擊後該運動會從列表中刪除。

這個系統可以進一步擴展,例如:

  • 加入時間戳來紀錄運動時間。
  • 計算運動總時長。
  • 將資料儲存在本地存儲(localStorage),以便重新載入網頁時保存記錄。

我會以解釋javascript程式碼部分為主

1. 變數宣告與元素獲取

const exerciseNameInput = document.getElementById('exercise-name');
const exerciseDurationInput = document.getElementById('exercise-duration');
const addExerciseButton = document.getElementById('add-exercise-btn');
const exerciseList = document.getElementById('exercise-list');

這段程式使用 document.getElementById 來獲取 HTML 中的 DOM 元素。這些元素與表單中的輸入欄位和按鈕相關聯:

  • exerciseNameInput: 用來獲取使用者輸入的運動名稱。
  • exerciseDurationInput: 用來獲取使用者輸入的運動時間(分鐘)。
  • addExerciseButton: 新增運動的按鈕。
  • exerciseList: 用來顯示運動記錄的 <ul> 列表。

2. 儲存運動記錄的數組

let exercises = [];
  • exercises 是一個空陣列,用來儲存所有的運動記錄。每次新增一個運動,它會被加到這個陣列中,這樣你可以跟踪所有的運動。

3. 新增運動功能

addExerciseButton.addEventListener('click', () => {
    const name = exerciseNameInput.value.trim();
    const duration = exerciseDurationInput.value.trim();

    if (name && duration && !isNaN(duration)) {
        const exercise = {
            name,
            duration: parseInt(duration, 10)
        };
        exercises.push(exercise);
        renderExerciseList();
        clearInputs();
    } else {
        alert('請正確輸入運動名稱和時間');
    }
});

這段程式的作用是監聽「新增運動」按鈕的點擊事件,並根據使用者的輸入來新增運動記錄:

  1. 監聽事件addExerciseButton.addEventListener('click', ...) 會在按鈕被點擊時執行內部的函數。

  2. 取得輸入值

    • name = exerciseNameInput.value.trim(); 取得使用者輸入的運動名稱,trim() 刪除頭尾的空白字符。
    • duration = exerciseDurationInput.value.trim(); 取得使用者輸入的運動時間(分鐘),也使用 trim() 刪除空白。
  3. 檢查有效性

    • 檢查 nameduration 是否存在且 duration 是數字(用 !isNaN(duration) 來確認是否是有效的數字)。
    • 如果有效,則建立一個新的運動物件 { name, duration: parseInt(duration, 10) }parseInt(duration, 10) 會把時間轉換成數字格式。
  4. 新增運動:使用 exercises.push(exercise); 把新的運動記錄加到 exercises 陣列中。

  5. 渲染列表:呼叫 renderExerciseList() 更新運動列表,顯示在網頁上。

  6. 清除輸入:呼叫 clearInputs() 清空輸入框,讓使用者可以輸入下一個運動。

  7. 錯誤處理:如果輸入無效,會顯示警告訊息 alert('請正確輸入運動名稱和時間');

4. 渲染運動列表

function renderExerciseList() {
    exerciseList.innerHTML = '';
    exercises.forEach((exercise, index) => {
        const listItem = document.createElement('li');
        listItem.innerHTML = `
            <span>${exercise.name} - ${exercise.duration} 分鐘</span>
            <button onclick="deleteExercise(${index})">刪除</button>
        `;
        exerciseList.appendChild(listItem);
    });
}

這個函數負責將 exercises 陣列中的每個運動記錄顯示在網頁上:

  1. 清空列表exerciseList.innerHTML = ''; 清空 <ul> 內的所有子元素,以避免每次新增運動時重複顯示舊的記錄。

  2. 迭代運動記錄exercises.forEach((exercise, index) => { ... }) 會遍歷 exercises 陣列中的每個項目,並根據運動名稱和運動時間建立一個新的列表項目 <li>

  3. 新增列表項目:使用 document.createElement('li') 建立新的 <li> 元素,並為每個運動新增一個按鈕。

  4. 按鈕功能:每個運動記錄的 <li> 內都有一個刪除按鈕,該按鈕會調用 deleteExercise(index) 函數來刪除對應的運動記錄。

  5. 加入列表exerciseList.appendChild(listItem); 將新建立的 <li> 元素加到運動列表 (<ul>) 中。

5. 刪除運動

function deleteExercise(index) {
    exercises.splice(index, 1);
    renderExerciseList();
}
  • 刪除記錄exercises.splice(index, 1); 會刪除 exercises 陣列中的一個項目,splice 函數從陣列的 index 位置刪除 1 個元素。
  • 更新列表:呼叫 renderExerciseList() 重新渲染運動列表,以便刪除後的運動記錄馬上反映在網頁上。

6. 清除輸入框

function clearInputs() {
    exerciseNameInput.value = '';
    exerciseDurationInput.value = '';
}
  • 清空輸入欄位:這個函數會把 exerciseNameInputexerciseDurationInput 的值設為空字串,讓使用者可以快速重新輸入新的運動記錄。

總結

這段 JavaScript 程式主要透過:

  • 監聽按鈕點擊事件,將使用者輸入的運動記錄保存到 exercises 陣列中。
  • 動態更新列表 來顯示每個運動項目,並提供刪除功能。

上一篇
day 20 javascript資訊盤點網頁程式管理系統
下一篇
day 22 javascript線上影片教學平台網頁程式管理系統
系列文
Javascript網頁程式管理系統30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言